<template>
 
   <div> 
    <input placeholder="输入关键字搜索" v-model.trim="name">
    <table class="my-table">
      <thead>
        <tr>
          <th>就诊日期</th>
          <th>医生姓名</th>
          <th>诊断结果</th>
          <th>处方信息</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item,index) in newArr"  :key="index">
          <td>{{item.date}}</td>
          <td>{{item.doctor}}</td>
          <td>{{item.diagnosis}}</td>
          <td>{{ item.prescription }}</td>
          <td @click="openFn(index)">详情</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script >
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 组件名称 from '组件路径'
export default {
  props:['records','open'],
  
 
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      name:'',
      newArr: [],
      isShow:true
    }
  },
  //计算属性
  computed: {},
  //侦听器
  watch: {
    name(value){
      clearTimeout(this.timeout)
       this.timeout = setTimeout(() => {
       this.newArr = this.records.filter(item => item.doctor === value)
       if(this.newArr.length < 1) this.newArr = this.records
       this.$emit('value', this.newArr)
       }, 500)
    }
     
  },
  //方法集合
  methods: {
    openFn(index){
      this.isShow = true 
      // alert(index)
      this.$emit('isShow', this.isShow) 
      this.$emit('index', index) 

    }
  },
  //生命周期 - 创建完成（可以访问this实例）
  created() {
    this.newArr = this.records
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  //beforeCreate() {},   //生命周期 - 创建之前
  //beforeMount() {},    //生命周期 - 挂载之前
  //beforeUpdate() {},   //生命周期 - 更新之前
  //updated() {},        //生命周期 - 更新之后
  //beforeDestroy() {},  //生命周期 - 销毁之前
  //destroyed() {},      //生命周期 - 销毁完成
  //activated() {}       //页面有keep-alive缓存功能时触发这个函数
}
</script>

<style scoped>
  .my-table {
    border-collapse: collapse;
    width: 100%;
  }

  .my-table td, .my-table th {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
  }

  .my-table th {
    background-color: #f2f2f2;
  }
  
</style>
